<template>
  <section :loading="loading" class="father">
    <!-- <el-row v-show="canVote" class="canVote">
      <p>活动暂未开始,敬请期待</p>
    </el-row> -->
    <el-row v-show="jobNumberShow">
      <img src="../assets/img/login.jpg" class="img">
      <!-- 填写工号 -->
      <el-row class="login">
        <el-form ref="loginForm" :model="loginForm" :rules="rules">
          <el-col :span="16" :offset="4">
            <el-form-item prop="jobNumber">
              <el-input placeholder="请输入工号" v-model="loginForm.jobNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="7">
            <el-form-item>
              <el-button type="success" @click="enterVote('loginForm')">进入投票界面</el-button>
            </el-form-item>
          </el-col>
        </el-form>

        <el-col style="text-align:center">tips:每人只能投票一次,请谨慎使用</el-col>
      </el-row>
    </el-row>

    <el-row v-show="voteShow">
      <el-col :span="10" :offset="1">
        <el-card :body-style="{ padding: '0px' }">
          <img src="../assets/img/program1.jpg" class="image">
          <div style="padding: 14px;">
            <span>{{list[0]}}</span>
            <div class="bottom clearfix">
              <time class="time">周娇娇</time>
              <el-button type="text" class="button" @click="vote(list[0])" :disabled="IsVote">点击投票</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" :offset="1">
        <el-card :body-style="{ padding: '0px' }">
          <img src="../assets/img/program2.jpg" class="image">
          <div style="padding: 14px;">
            <span>{{list[1]}}</span>
            <div class="bottom clearfix">
              <time class="time">张芬芬 陆梦丹</time>
              <el-button type="text" class="button" @click="vote(list[1])" :disabled="IsVote">点击投票</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" :offset="1">
        <el-card :body-style="{ padding: '0px' }">
          <img src="../assets/img/program3.jpg" class="image">
          <div style="padding: 14px;">
            <span>{{list[2]}}</span>
            <div class="bottom clearfix">
              <time class="time">品质部</time>
              <el-button type="text" class="button" @click="vote(list[2])" :disabled="IsVote">点击投票</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" :offset="1">
        <el-card :body-style="{ padding: '0px' }">
          <img src="../assets/img/program4.jpg" class="image">
          <div style="padding: 14px;">
            <span>{{list[3]}}</span>
            <div class="bottom clearfix">
              <time class="time">王宗英 吕杰克</time>
              <el-button type="text" class="button" @click="vote(list[3])" :disabled="IsVote">点击投票</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" :offset="1">
        <el-card :body-style="{ padding: '0px' }">
          <img src="../assets/img/program5.jpg" class="image">
          <div style="padding: 14px;">
            <span>{{list[4]}}</span>
            <div class="bottom clearfix">
              <time class="time">范啊玲</time>
              <el-button type="text" class="button" @click="vote(list[4])" :disabled="IsVote">点击投票</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" :offset="1">
        <el-card :body-style="{ padding: '0px' }">
          <img src="../assets/img/program6.jpg" class="image">
          <div style="padding: 14px;">
            <span>{{list[5]}}</span>
            <div class="bottom clearfix">
              <time class="time">刘志强</time>
              <el-button type="text" class="button" @click="vote(list[5])" :disabled="IsVote">点击投票</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" :offset="1">
        <el-card :body-style="{ padding: '0px' }">
          <img src="../assets/img/program7.jpg" class="image">
          <div style="padding: 14px;">
            <span>{{list[6]}}</span>
            <div class="bottom clearfix">
              <time class="time">王卫</time>
              <el-button type="text" class="button" @click="vote(list[6])" :disabled="IsVote">点击投票</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" :offset="1">
        <el-card :body-style="{ padding: '0px' }">
          <img src="../assets/img/program8.jpg" class="image">
          <div style="padding: 14px;">
            <span>{{list[7]}}</span>
            <div class="bottom clearfix">
              <time class="time">徐康杰</time>
              <el-button type="text" class="button" @click="vote(list[7])" :disabled="IsVote">点击投票</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" :offset="1">
        <el-card :body-style="{ padding: '0px' }">
          <img src="../assets/img/program9.jpg" class="image">
          <div style="padding: 14px;">
            <span>{{list[8]}}</span>
            <div class="bottom clearfix">
              <time class="time">董国京</time>
              <el-button type="text" class="button" @click="vote(list[8])" :disabled="IsVote">点击投票</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" :offset="1">
        <el-card :body-style="{ padding: '0px' }">
          <img src="../assets/img/program10.jpg" class="image">
          <div style="padding: 14px;">
            <span>{{list[9]}}</span>
            <div class="bottom clearfix">
              <time class="time">彭树群/肖云</time>
              <el-button type="text" class="button" @click="vote(list[9])" :disabled="IsVote">点击投票</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" :offset="1">
        <el-card :body-style="{ padding: '0px' }">
          <img src="../assets/img/program11.jpg" class="image">
          <div style="padding: 14px;">
            <span>{{list[10]}}</span>
            <div class="bottom clearfix">
              <time class="time">品质部</time>
              <el-button type="text" class="button" @click="vote(list[10])" :disabled="IsVote">点击投票</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" :offset="1">
        <el-card :body-style="{ padding: '0px' }">
          <img src="../assets/img/program12.jpg" class="image">
          <div style="padding: 14px;">
            <span>{{list[11]}}</span>
            <div class="bottom clearfix">
              <time class="time">营销部舞蹈协会</time>
              <el-button type="text" class="button" @click="vote(list[11])" :disabled="IsVote">点击投票</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" :offset="1">
        <el-card :body-style="{ padding: '0px' }">
          <img src="../assets/img/program13.jpg" class="image">
          <div style="padding: 14px;">
            <span>{{list[12]}}</span>
            <div class="bottom clearfix">
              <time class="time">2019届实习生</time>
              <el-button type="text" class="button" @click="vote(list[12])" :disabled="IsVote">点击投票</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" :offset="1">
        <el-card :body-style="{ padding: '0px' }">
          <img src="../assets/img/program14.jpg" class="image">
          <div style="padding: 14px;">
            <span>{{list[13]}}</span>
            <div class="bottom clearfix">
              <time class="time">邱闻卿</time>
              <el-button type="text" class="button" @click="vote(list[13])" :disabled="IsVote">点击投票</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- <el-col :span="10" :offset="1">
        <el-card :body-style="{ padding: '0px' }">
          <img src="../assets/img/er.png" class="image">
          <div style="padding: 14px;">
            <span>{{list[14]}}</span>
            <div class="bottom clearfix">
              <time class="time">参演人员</time>
              <el-button type="text" class="button" @click="vote(list[14])" :disabled="IsVote">点击投票</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" :offset="1">
        <el-card :body-style="{ padding: '0px' }">
          <img src="../assets/img/er.png" class="image">
          <div style="padding: 14px;">
            <span>{{list[15]}}</span>
            <div class="bottom clearfix">
              <time class="time">参演人员</time>
              <el-button type="text" class="button" @click="vote(list[15])" :disabled="IsVote">点击投票</el-button>
            </div>
          </div>
        </el-card>
      </el-col>-->
    </el-row>
  </section>
</template>
<script>
import { checkJobNumber, voteSubmit, cTime } from "../api/nianhui.js";
export default {
  // 节目清单,节目图片+节目名称+演员+投票按钮
  data() {
    return {
      currentDate: new Date(),
      canVote: true,
      jobNumberShow: true,
      voteShow: false,
      IsVote: false,
      loginForm: { jobNumber: "", name: "" },
      loading: false,
      list: [
        "Rolling in the deep",
        "The Day You Went Away",
        "爱的华尔兹",
        "被风吹过的夏天",
        "房间",
        "行走在秋季",
        "怀念青春",
        "那些你很冒险的梦",
        "情人迷",
        "谁明浪子心",
        "舞蹈串烧",
        "舞动青春",
        "西游外传",
        "玉人舞"
        // "难忘今宵",
        // "难忘今宵"
      ],
      rules: {
        jobNumber: [
          { required: true, message: "请输入您的工号", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    // 工号验证
    enterVote(formName) {
      // 验证工号
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loding = true;
          //
          this.jobNumberShow = false;
              this.voteShow = true;
              this.loginForm.name = res.name;
               this.IsVote = true;
          // checkJobNumber(this.loginForm.jobNumber).then(res => {
          //   this.loading = false;
          //   // if (res) {
          //     // 进入投票界面
          //     this.jobNumberShow = false;
          //     this.voteShow = true;
          //     this.loginForm.name = res.name;
          //     // 此工号没有投过票的可以投票,投过票的不能继续投票
          //     if (res.msg === "NO") {
          //       this.IsVote = true;
          //     } else if (res.msg === "OK") {
          //       this.IsVote = false;
          //     }
          //   // } else {
          //   //   this.loginForm.jobNumber = "";
          //   //   // this.$message.warning("请输入正确的工号!");
          //   //   this.$notify({
          //   //     title: "message",
          //   //     message: "请输入正确的工号!",
          //   //     offset: 100
          //   //   });
          //   // }
          // });
        }
      });
      // if (this.loginForm.jobNumber !== "") {
      // } else {
      //   this.$message.warning("请先输入工号!");
      // }
    },
    vote(program) {
      console.log(program);
      // return -1;
      // 确定用户填完工号以后,向后台提交数据
      voteSubmit(program, this.loginForm.jobNumber, this.loginForm.name).then(
        res => {
          if (res) {
            // this.$message.success(res.msg);
            // this.$alert("???", "??", {
            //   confirmButtonText: "确定",
            //   callback: action => {
            //     nihao;
            //   }
            // });
            this.$notify({
              title: "message",
              message: "投票成功!",
              offset: 200
            });
            this.IsVote = true;
          } else {
            // this.$message.success("投票失败!");
            this.$notify({
              title: "message",
              message: "投票失败!",
              offset: 200
            });
            this.jobNumberShow = true;
            this.voteShow = false;
          }
        }
      );
    },
    checkTime() {
      // 检查是否到了活动日期
      cTime().then(res => {
        if (res) {
          this.canVote = false;
          this.jobNumberShow = true;
        } else {
          this.canVote = true;
          this.jobNumberShow = false;
        }
      });
    }
  },
  mounted() {
    /**
     * 校验是否已经投过票,投过票的投票按钮全部禁用,并且不用填工号
     * 未投过票的,先填工号,然后投票
     */
    // IsVote("pwd").then(res => {
    //   if (res) {
    //     //
    //   }
    // });
    this.checkTime();
  }
};
</script>
<style scoped>
.father {
  /* display: flex; */
}
.canVote {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.login {
  position: absolute;
  margin: auto auto;
  top: 30%;
  background: hsla(0, 0%, 100%, 0.4);
  border-radius: 1rem;
  overflow: hidden;
  padding-top: 1.5rem;
  width: 80%;
  left: 10%;
}
.login::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  filter: blur(20px);
  margin: -30px;
}
.background {
  width: 100%;
  /* margin-top: -10rem; */
}
img {
  max-width: 100%;
  /* height: 100%; */
}
.time {
  font-size: 13px;
  color: #999;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.button {
  padding: 0;
  float: right;
}
.image {
  width: 100%;
  display: block;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
